<template>
    <div>
        <div class="memberPhotos">
            <div class="memtx">
                <img :src="info.logo" style="border-radius: 0; height: auto;">
            </div>
            <h2>{{info.nickname}}</h2>
            <p style="font-size: 1rem;overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;"><span>{{info.enterpriseNature}}</span> | <span>{{info.industry}}</span></p>
            <el-upload
                    name="enterprise_logo"
                    style="text-align: center"
                    :action="uploadLogo"
                    accept=".jpg,.png"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <div class="yulan" v-loading="loading">修改logo</div>
            </el-upload>

        </div>
        <el-menu
                :default-active="active"
                class="el-menu-vertical-demo"
                background-color="#fff"
                text-color="#1e1e1e"
                active-text-color="#20a2b2">
            <el-menu-item :index="item.name" v-for="(item, index) in memlist" :key="index"
                          @click="tohtml(item.name)">
                <img :src="item.icon">
                <span slot="title">{{item.title}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import { uploadLogo, updateEnterpriseLogo, EnterpriseInfo } from '../assets/js/domains'
import mt from '../assets/img/mt.png'
import mem_jinali from '../assets/img/mem_jinali.png'
import mem_look from '../assets/img/mem_look.png'
import mem_sq from '../assets/img/mem_sq.png'
import mem_sc from '../assets/img/mem_sc.png'
import mem_password from '../assets/img/mem_password.png'

export default {
  name: 'CompanyLeft',
  components: {},
  data: function () {
    return {
      mt: mt,
      loading: false,
      enterprise_id: '',
      info: {},
      uploadLogo: uploadLogo,
      memlist: [
        {
          name: '',
          title: '企业信息',
          icon: mem_jinali
        },
        {
          name: 'jobList',
          title: '招聘职位管理',
          icon: mem_look
        },
        {
          name: 'joinList',
          title: '应聘简历管理',
          icon: mem_sq
        },
        {
          name: 'meet',
          title: '招聘会报名',
          icon: mem_sc
        },
        {
          name: 'changepwd',
          title: '修改密码',
          icon: mem_password
        }
      ]
    }
  },
  props: {
    active: {
      default: ''
    }
  },
  computed: {},
  created: function () {
    if (localStorage.getItem('md_userInfo')) {
      const cans = JSON.parse(localStorage.getItem('md_userInfo'))
      this.info.name = cans.name
      this.info.logo = cans.logo
    }
  },
  mounted: function () {
    this.enterprise_id = localStorage.getItem('md_user_uid')
    this.getEnterpriseInfo()
  },
  methods: {
    getEnterpriseInfo: function () {
      const _this = this
      EnterpriseInfo({ enterprise_id: this.enterprise_id }).then(function (res) {
        if (res.code === 200) {
          _this.info = Object.assign({}, res.data)
          localStorage.setItem('md_userInfo', JSON.stringify(res.data))
        }
      })
    },
    handleAvatarSuccess: function (e) {
      this.loading = false
      if (e.code === 200) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })

        this.getupdateEnterpriseLogo(e.data)
      }
    },
    beforeAvatarUpload: function () {
      this.loading = true
    },
    getupdateEnterpriseLogo: function (e) {
      const _this = this
      updateEnterpriseLogo({
        enterprise_id: this.enterprise_id,
        logo_url: e
      }).then(function (res) {
        if (res.code === 200) {
          _this.info.logo = e
          const md_userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
          md_userInfo.logo = e
          localStorage.setItem('md_userInfo', JSON.stringify(md_userInfo))
          _this.$message({
            message: '更新成功',
            type: 'success'
          })
        }
      })
    },
    viewpre: function () {
      window.location.href = 'personResume.html'
    },
    tohtml: function (name) {
      this.$router.push({ path: '/' + name })
    }
  }
}
</script>
<style lang="less">
    .memberPhotos {
        background: #fff;
        width: 200px;
        clear: both;
        overflow: hidden;
        margin-bottom: 30px;
        padding-bottom: 20px;

        .memtx {
            text-align: center;
            padding: 50px 0 0 0;

            img {
                width: 77px;
                height: 77px;
                border-radius: 50%;
                margin: 0 auto;
            }
        }

        h2 {
            font-size: 22px;
            text-align: center;
            color: #1e1e1e;
            line-height: 30px;
        }

        p {
            height: 24px;
            font-size: 16px;
            text-align: center;
            color: #8d8e9c;
            line-height: 24px;
        }

        .yulan {
            width: 160px;
            height: 40px;
            line-height: 36px;
            border: 2px solid #20a2b2;
            border-radius: 6px;
            font-size: 18px;
            text-align: center;
            color: #20a2b2;
            margin: 10px auto;
        }
    }
</style>
